<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手动分配奖金</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/assets/css/main.css">
<script src="/assets/lib/jquery/jquery.min.js"></script>  
<script src="/assets/lib/layer/layer.js"></script>
</head>
<body>
	<div class="bg-dark dk" id="wrap" style="height: 50px;">
		<header class="head">
	        <div class="">
	            <ol class="breadcrumb" style="background-color: #3a3a3a">
	                <li><a href="#"> <i class="fa fa-home"> 财务管理</i></a></li>
	                <li class="active">手动分配奖金</li>
	            </ol>
	        </div>
	    </header>
	</div>
	<div class="container" style="width: 100%;">
		<div class="allotBonus">
			<form id="form">
				<div class="orderInfo">
					<h3>订单信息</h3>
					<div class="orderNum">
						<span>订单号：</span>
						<input type="text" class="form-control" id="orderNum" name="orderNum" placeholder="请输入订单号">
						<input type="button" class="btn" id="select" value="订单查询">
					</div>
					<div class="hidden interval">
						<p><span>消费者：</span><span id="consumer"></span></p>
						<p><span>秒商商家：</span><span id="merchant"></span></p>
						<p><span>商家货款：</span><span id="money"></span></p>
					</div>
					<div class="clear"></div>
				</div>
				<div class="hidden allotInfo">
					<h3>奖金分配设置</h3>
					<p class="warn">*若某个等级没有需要分配的人员，可以不填</p>
					<div class="allot">
						<p>
							<span>分红股东：</span>
							<input type="text" class="form-control phone" id="shareholder" name="shareholder" maxlength="11" placeholder="分红股东手机号">
							<span>分配金额：</span>
							<input type="text" class="form-control" id="shareholderMoney" name="shareholderMoney" maxlength="4" placeholder="分配金额">
							<span>元</span>
						</p>
						<p>
							<span>高级城市合伙人：</span>
							<input type="text" class="form-control phone" id="seniorPartner" name="seniorPartner" maxlength="11" placeholder="高级城市合伙人手机号">
							<span>分配金额：</span>
							<input type="text" class="form-control" id="seniorPartnerMoney" name="seniorPartnerMoney" maxlength="4" placeholder="分配金额">
							<span>元</span>
						</p>
						<p>
							<span>城市合伙人：</span>
							<input type="text" class="form-control phone" id="cityPartner" name="cityPartner" maxlength="11" placeholder="城市合伙人手机号">
							<span>分配金额：</span>
							<input type="text" class="form-control" id="cityPartnerMoney" name="cityPartnerMoney" maxlength="4" placeholder="分配金额">
							<span>元</span>
						</p>
						<p>
							<span>代理商：</span>
							<input type="text" class="form-control phone" id="agency" name="agency" maxlength="11" placeholder="代理商手机号">
							<span>分配金额：</span>
							<input type="text" class="form-control" id="agencyMoney" name="agencyMoney" maxlength="4" placeholder="分配金额">
							<span>元</span>
						</p>
						<div class="btn-div">
							<input type="button" class="btn" id="reset" value="重置">
							<input type="button" class="btn" id="confirm" value="确认分配">
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	<script>
		$(function() {
			// 订单查询
			$('#select').on('click', function() {
				$.ajax({
					type: "Get",
					dataType: "json",
					url: "/getOrderInfo",
					data: {orderNum: $('#orderNum').val()},
					success: function(res) {
						if (null != res.status) {
							layer.msg(res.info, {icon: 7});
						} else {
							data = res.data;
							$('#consumer').text(data.consumer + "[" + data.consumerPhone + "]");
							$('#merchant').text(data.merchant + "[" + data.merchantPhone + "]");
							$('#money').text(data.merchantIncome);
							
							$('.hidden').each(function() {
								$(this).removeClass('hidden');
							})
						}
					},
					error: function() {
						layer.msg("获取订单失败！请重试。。。", {icon:7});
					}
				});
			})
			
			// 人员姓名池查询
			$('.phone').blur(function(){
				phone = $(this).val();
				$input = $(this);
				if (phone.trim().length > 0) {
					$.ajax({
						type: "Get",
						dataType: "json",
						url: "/getUserName",
						data: {phone: phone},
						success: function(res) {
							if (null != res.status) {
								layer.msg(res.info, {icon: 7});
							} else {
								$input.val(phone + " [" + res.data + "]")
							}
						}
					})
				}
			})
			
			// 确认分配
			$('#confirm').on('click', function(e) {
				$("#confirm").attr('disabled', true);
				$('#reset').attr('disabled', true);
				$.ajax({
					type: "Get",
					dataType: "json",
					url: "/allotBonus",
					data: $("form").serialize(),
					success: function(res) {
						if ("y" != res.status) {
							layer.msg(res.info, {
								icon: 7,
								time: 0,
								btn: ['确定'],
								yes: function(index) {
								    layer.close(index);
									$("#confirm").attr('disabled', false);
									$('#reset').attr('disabled', false);
								}
							});
						} else {
							layer.msg(res.info + ' 是否清空数据？', {
								time: 0, //不自动关闭
								anim: 1, //动画类型
								btn: ['清空','暂不清空'], //按钮
								yes: function(index) {
								    layer.close(index);
									// 隐藏
									$('.interval').addClass('hidden');
									$('.allotInfo').addClass('hidden');
									// 清空
									$('#consumer').text('');
									$('#merchant').text('');
									$('#money').text('');
									$('.form-control').val('');
									$("#confirm").attr('disabled', false);
									$('#reset').attr('disabled', false);
								},
								btn2: function() {
									$("#confirm").attr('disabled', false);
									$('#reset').attr('disabled', false);
								}
							});
						}
					},
					error: function() {
						layer.msg("分配奖金失败！请重试。。。", {icon:7});
						$("#confirm").attr('disabled', false);
						$('#reset').attr('disabled', false);
					}
				})
			})
			
			// 重置
			$('#reset').on('click', function() {
				// 隐藏
				$('.interval').addClass('hidden');
				$('.allotInfo').addClass('hidden');
				// 清空
				$('#consumer').text('');
				$('#merchant').text('');
				$('#money').text('');
				$('.form-control').val('');
				$("#confirm").attr('disabled', false);
			})
		});
	</script>
</body>
</html>